<template>
  <div class="app-container">
    <el-card class="wx-detail-card" shadow="hover">
      <div class="info-container">
        
        <div class="info-section">
          <h3>AI配置</h3>
          <el-form :model="form" :rules="rules" ref="wxRef" label-width="100px" class="ai-form">
            <el-form-item label="智能体" prop="agentId" style="width: 100%">
              <el-select v-model="form.agentId" placeholder="请选择智能体" style="width: 100%">
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="提示词" prop="remark" style="width: 100%">
              <div class="remark-container">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入提示词"
                  style="width: 100%"
                
                />
                <el-button type="primary" @click="handleUpdateRemark" v-hasPermi="['app-store:wx:edit']">修改提示词</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        
      </div>
      <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-card>

    <!-- 更新配置对话框 -->
    
  </div>
</template>

<script setup name="WxConfigDetail">
import { listWxConfig, updateWxConfig } from "@/api/app-store/wx";
import { listAgent } from "@/api/app-store/agent";

const { proxy } = getCurrentInstance();
const open = ref(false);
const wxConfig = ref({});
const agentList = ref([]);

const data = reactive({
  form: {
    id: undefined,
    agentId: undefined,
    remark: undefined
  },
  rules: {
    agentId: [{ required: true, message: "请选择智能体", trigger: "change" }]
  }
});

const { form, rules } = toRefs(data);

/** 查询微信公众号配置列表 */
function getList() {
  listWxConfig().then(response => {
    console.log(response);
    
    wxConfig.value = response.rows[0];
    form.value = {
      id: wxConfig.value.id,
      agentId: wxConfig.value.agentId,
      remark: wxConfig.value.remark
    };
  });
}


/** 获取智能体列表 */
function getAgentList() {
  listAgent().then(response => {
    agentList.value = response.rows;
  });
}


getList();
getAgentList();

/** 表单提交 */
function submitForm() {
  proxy.$refs["wxRef"].validate(valid => {
    if (valid) {
      updateWxConfig(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        getList();
      });
    }
  });
}

/** 取消按钮 */
function cancel() {
  getList();
}
</script>

<style scoped>
.wx-detail-card {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-section {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.info-section h3 {
  margin-bottom: 20px;
  color: #303133;
  font-size: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.info-item .label {
  color: #909399;
  font-size: 14px;
}

.info-item .value {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.ai-form {
  width: 100%;
}

.remark-container {
  width: 100%;
  display: block;
}

.remark-container .el-input,
.remark-container .el-textarea,
.remark-container .el-textarea__inner,
.remark-container :deep(.el-textarea__inner) {
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.remark-container .el-button {
  margin-top: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.form-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.form-item-agent {
  flex: 0 0 300px;
}

.form-item-remark {
  flex: 1;
}
</style>